import type { VbenFormSchema } from '@/components/Form';
import type { VxeTableGridOptions } from 'vxe-table';

import { h } from 'vue';

import { Button, Space, Tag } from 'ant-design-vue';

// 资源类型配置
export const resourceTypeConfig = {
  PHYSICAL: {
    label: '物理资源',
    color: '#1890ff',
    icon: 'ant-design:database-outlined',
  },
  HUMAN: {
    label: '人力资源',
    color: '#52c41a',
    icon: 'ant-design:user-outlined',
  },
  DIGITAL: {
    label: '数字资源',
    color: '#722ed1',
    icon: 'ant-design:file-outlined',
  },
  SERVICE: {
    label: '服务资源',
    color: '#fa8c16',
    icon: 'ant-design:setting-outlined',
  },
  BUSINESS: {
    label: '业务资源',
    color: '#eb2f96',
    icon: 'ant-design:shop-outlined',
  },
  TECHNICAL: {
    label: '技术资源',
    color: '#13c2c2',
    icon: 'ant-design:code-outlined',
  },
};

// 资源子类型配置
export const resourceSubTypeConfig = {
  // 物理资源子类型
  BUILDING: { label: '建筑物', type: 'PHYSICAL' },
  FLOOR: { label: '楼层', type: 'PHYSICAL' },
  ROOM: { label: '房间', type: 'PHYSICAL' },
  EQUIPMENT: { label: '设备', type: 'PHYSICAL' },
  VEHICLE: { label: '车辆', type: 'PHYSICAL' },
  FURNITURE: { label: '家具', type: 'PHYSICAL' },

  // 人力资源子类型
  TEAM: { label: '团队', type: 'HUMAN' },
  INDIVIDUAL: { label: '个人', type: 'HUMAN' },
  DEPARTMENT: { label: '部门', type: 'HUMAN' },

  // 数字资源子类型
  SOFTWARE: { label: '软件', type: 'DIGITAL' },
  MODULE: { label: '模块', type: 'DIGITAL' },
  API: { label: '接口', type: 'DIGITAL' },
  DATABASE: { label: '数据库', type: 'DIGITAL' },
  FILE: { label: '文件', type: 'DIGITAL' },

  // 服务资源子类型
  SERVICE: { label: '服务', type: 'SERVICE' },
  PROCESS: { label: '流程', type: 'SERVICE' },
  WORKFLOW: { label: '工作流', type: 'SERVICE' },

  // 业务资源子类型
  PRODUCT: { label: '产品', type: 'BUSINESS' },
  ORDER: { label: '订单', type: 'BUSINESS' },
  CUSTOMER: { label: '客户', type: 'BUSINESS' },

  // 技术资源子类型
  COMPONENT: { label: '组件', type: 'TECHNICAL' },
  LIBRARY: { label: '库', type: 'TECHNICAL' },
  FRAMEWORK: { label: '框架', type: 'TECHNICAL' },
};

// 生命周期状态配置
export const lifecycleStatusConfig = {
  DRAFT: { label: '草稿', color: '#d9d9d9' },
  ACTIVE: { label: '激活', color: '#52c41a' },
  MAINTENANCE: { label: '维护', color: '#faad14' },
  RETIRED: { label: '退役', color: '#ff4d4f' },
};

// 表格列配置
export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'serial_number',
      title: '序号',
      width: 80,
      fixed: 'left',
    },
    {
      field: 'name',
      title: '资源名称',
      width: 250,
      fixed: 'left',
      slots: {
        default: ({ row }: any) => {
          return h('div', { class: 'resource-name' }, [
            // 显示层级缩进
            h('span', {
              style: {
                display: 'inline-block',
                width: `${(row.level - 1) * 20}px`,
              },
            }),
            // 使用资源本身的图标和颜色
            h(Icon, {
              icon: row.icon || 'ant-design:appstore-outlined',
              class: 'resource-icon',
              style: { color: row.color || '#1890ff' },
            }),
            h('span', { style: { color: row.color || '#1890ff' } }, row.name),
            // 显示层级标识
            row.level > 1 &&
              h(
                'span',
                {
                  style: {
                    fontSize: '12px',
                    color: '#999',
                    marginLeft: '8px',
                  },
                },
                `L${row.level}`,
              ),
          ]);
        },
      },
    },
    {
      field: 'code',
      title: '资源编码',
      width: 150,
    },
    {
      field: 'resource_type_name',
      title: '资源类型',
      width: 100,
      slots: {
        default: ({ row }: any) => {
          const typeConfig =
            resourceTypeConfig[
              row.resource_type as keyof typeof resourceTypeConfig
            ];
          return h(
            Tag,
            { color: typeConfig?.color },
            row.resource_type_name || typeConfig?.label || row.resource_type,
          );
        },
      },
    },
    {
      field: 'resource_sub_type_name',
      title: '资源子类型',
      width: 120,
    },
    {
      field: 'parent_name',
      title: '父级资源',
      width: 120,
      slots: {
        default: ({ row }: any) => {
          if (!row.parent_id) {
            return h('span', { style: { color: '#999' } }, '顶级资源');
          }
          return h('span', row.parent_name || `ID: ${row.parent_id}`);
        },
      },
    },
    {
      field: 'resource_type',
      title: '资源类型',
      width: 120,
      slots: {
        default: ({ row }: any) => {
          const typeConfig =
            resourceTypeConfig[
              row.resource_type as keyof typeof resourceTypeConfig
            ];
          return h(Tag, { color: typeConfig?.color }, typeConfig?.label);
        },
      },
    },
    {
      field: 'lifecycle_status',
      title: '生命周期',
      width: 100,
      slots: {
        default: ({ row }: any) => {
          const statusConfig =
            lifecycleStatusConfig[
              row.lifecycle_status as keyof typeof lifecycleStatusConfig
            ];
          return h(Tag, { color: statusConfig?.color }, statusConfig?.label);
        },
      },
    },
    {
      field: 'business_type_name',
      title: '业务类型',
      width: 120,
    },
    {
      field: 'properties',
      title: '属性',
      width: 200,
      slots: {
        default: ({ row }: any) => {
          if (!row.properties) return '-';
          const props = JSON.parse(row.properties);
          const keys = Object.keys(props).slice(0, 3);
          return h(
            'div',
            keys.map((key) =>
              h(
                Tag,
                { size: 'small', style: 'margin: 2px' },
                `${key}: ${props[key]}`,
              ),
            ),
          );
        },
      },
    },
    {
      field: 'status',
      title: '状态',
      width: 80,
      slots: {
        default: ({ row }: any) => {
          return h(
            Tag,
            { color: row.status === 1 ? 'green' : 'red' },
            row.status === 1 ? '启用' : '禁用',
          );
        },
      },
    },
    {
      field: 'create_time',
      title: '创建时间',
      width: 160,
    },
    {
      field: 'action',
      title: '操作',
      width: 200,
      fixed: 'right',
      slots: {
        default: ({ row }: any) => {
          return h(Space, [
            h(
              Button,
              {
                type: 'link',
                size: 'small',
                onClick: () => handleView(row),
              },
              '查看',
            ),
            h(
              Button,
              {
                type: 'link',
                size: 'small',
                onClick: () => handleEdit(row),
              },
              '编辑',
            ),
            h(
              Button,
              {
                type: 'link',
                size: 'small',
                onClick: () => handleManage(row),
              },
              '管理',
            ),
            h(
              Button,
              {
                type: 'link',
                size: 'small',
                danger: true,
                onClick: () => handleDelete(row),
              },
              '删除',
            ),
          ]);
        },
      },
    },
  ];
}

// 表单配置
export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      field: 'name',
      fieldName: 'name',
      label: '资源名称',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '请输入资源名称',
      },
    },
    {
      field: 'code',
      fieldName: 'code',
      label: '资源编码',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '请输入资源编码',
      },
    },
    {
      field: 'resource_type',
      fieldName: 'resource_type',
      label: '资源类型',
      component: 'Select',
      required: true,
      componentProps: {
        placeholder: '请选择资源类型',
        options: Object.entries(resourceTypeConfig).map(([value, config]) => ({
          label: config.label,
          value,
        })),
      },
    },
    {
      field: 'resource_sub_type',
      fieldName: 'resource_sub_type',
      label: '资源子类型',
      component: 'Select',
      required: true,
      componentProps: {
        placeholder: '请选择资源子类型',
        options: Object.entries(resourceSubTypeConfig).map(
          ([value, config]) => ({
            label: config.label,
            value,
          }),
        ),
      },
    },
    {
      field: 'icon',
      fieldName: 'icon',
      label: '图标',
      component: 'IconSelector',
      defaultValue: 'ant-design:appstore-outlined',
    },
    {
      field: 'color',
      fieldName: 'color',
      label: '颜色',
      component: 'ColorSelector',
      defaultValue: '#1890ff',
    },
    {
      field: 'image_url',
      fieldName: 'image_url',
      label: '图片',
      component: 'Input',
      componentProps: {
        placeholder: '请输入图片URL或上传图片',
      },
    },
    {
      field: 'category_id',
      fieldName: 'category_id',
      label: '所属分类',
      component: 'TreeSelect',
      required: true,
      componentProps: {
        placeholder: '请选择所属分类',
        treeData: [],
        fieldNames: {
          label: 'name',
          value: 'id',
          children: 'children',
        },
        allowClear: true,
      },
    },
    {
      field: 'parent_id',
      fieldName: 'parent_id',
      label: '父级资源',
      component: 'TreeSelect',
      componentProps: {
        placeholder: '请选择父级资源',
        treeData: [],
        fieldNames: {
          label: 'name',
          value: 'id',
          children: 'children',
        },
        allowClear: true,
      },
    },
    {
      field: 'business_type',
      fieldName: 'business_type',
      label: '业务类型',
      component: 'Select',
      componentProps: {
        placeholder: '请选择业务类型',
        options: [
          { label: '酒店业务', value: 'HOTEL' },
          { label: '公寓业务', value: 'APARTMENT' },
          { label: '温泉洗浴', value: 'SPA' },
          { label: '景区业务', value: 'SCENIC' },
          { label: '餐饮业务', value: 'RESTAURANT' },
          { label: '医美业务', value: 'MEDICAL_BEAUTY' },
          { label: '美容美发', value: 'BEAUTY_SALON' },
          { label: '人力资源', value: 'HUMAN' },
        ],
      },
    },
    {
      field: 'lifecycle_status',
      fieldName: 'lifecycle_status',
      label: '生命周期状态',
      component: 'Select',
      required: true,
      defaultValue: 'DRAFT',
      componentProps: {
        placeholder: '请选择生命周期状态',
        options: Object.entries(lifecycleStatusConfig).map(
          ([value, config]) => ({
            label: config.label,
            value,
          }),
        ),
      },
    },
    {
      field: 'description',
      fieldName: 'description',
      label: '描述',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入描述',
        rows: 3,
      },
    },
    {
      field: 'properties',
      fieldName: 'properties',
      label: '属性配置',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入属性配置（JSON格式）',
        rows: 4,
      },
    },
    {
      field: 'capabilities',
      fieldName: 'capabilities',
      label: '能力配置',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入能力配置（JSON格式）',
        rows: 4,
      },
    },
    {
      field: 'constraints',
      fieldName: 'constraints',
      label: '约束配置',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入约束配置（JSON格式）',
        rows: 4,
      },
    },
    {
      field: 'status',
      fieldName: 'status',
      label: '状态',
      component: 'RadioGroup',
      defaultValue: 1,
      componentProps: {
        options: [
          { label: '启用', value: 1 },
          { label: '禁用', value: 0 },
        ],
      },
    },
  ];
}

// 分类表单配置
export function useCategoryFormSchema(): VbenFormSchema[] {
  return [
    {
      field: 'name',
      fieldName: 'name',
      label: '分类名称',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '请输入分类名称',
      },
    },
    {
      field: 'code',
      fieldName: 'code',
      label: '分类编码',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '请输入分类编码',
      },
    },
    {
      field: 'category_type',
      fieldName: 'category_type',
      label: '分类类型',
      component: 'Select',
      required: true,
      componentProps: {
        placeholder: '请选择分类类型',
        options: Object.entries(resourceTypeConfig).map(([value, config]) => ({
          label: config.label,
          value,
        })),
      },
    },
    {
      field: 'parent_id',
      fieldName: 'parent_id',
      label: '父级分类',
      component: 'TreeSelect',
      componentProps: {
        placeholder: '请选择父级分类',
        treeData: [],
        fieldNames: {
          label: 'name',
          value: 'id',
          children: 'children',
        },
      },
    },
    {
      field: 'icon',
      fieldName: 'icon',
      label: '图标',
      component: 'IconSelector',
      defaultValue: 'ant-design:database-outlined',
      componentProps: {
        placeholder: '请选择图标',
      },
    },
    {
      field: 'color',
      fieldName: 'color',
      label: '颜色',
      component: 'ColorPicker',
      defaultValue: '#1890ff',
      componentProps: {
        placeholder: '请选择颜色',
        showText: true,
        format: 'hex',
      },
    },
    {
      field: 'sort',
      fieldName: 'sort',
      label: '排序',
      component: 'InputNumber',
      defaultValue: 0,
      componentProps: {
        placeholder: '请输入排序值',
      },
    },
    {
      field: 'description',
      fieldName: 'description',
      label: '描述',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入描述',
        rows: 3,
      },
    },
    {
      field: 'status',
      fieldName: 'status',
      label: '状态',
      component: 'RadioGroup',
      defaultValue: 1,
      componentProps: {
        options: [
          { label: '启用', value: 1 },
          { label: '禁用', value: 0 },
        ],
      },
    },
  ];
}

// 操作处理函数
function handleView(row: any) {
  // 查看资源详情
  console.log('View resource:', row);
}

function handleEdit(row: any) {
  // 编辑资源
  console.log('Edit resource:', row);
}

function handleManage(row: any) {
  // 管理资源
  console.log('Manage resource:', row);
}

function handleDelete(row: any) {
  // 删除资源
  console.log('Delete resource:', row);
}
